<template>
  <div id="main">
    <!-- <el-header> -->
    <el-row class="top">
      <el-col class="top-title">留言板</el-col>
      <el-col class="top-num">已有{{ messageSize }}人在此留言</el-col>
    </el-row>
    <!-- 留言区 -->
    <el-row class="leave-message">
      <el-card class="box-card">
        <el-row>
          <el-col :xs="8" :sm="4" :md="4" >
            <div class="profile">
              <img src="../assets/profile.png" alt="" />
            </div>
          </el-col>
          <el-col :xs="14" :sm="14" :md="8" class="name-box">
            <el-input
              placeholder="输入你的昵称"
              v-model="inputData.userName"
              clearable
            ></el-input>
            <p>在说:</p>
          </el-col>
        </el-row>

        <el-row class="comment-text">
          <el-col>
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 6 }"
              placeholder="你也来说两句吧！点击这里输入留言内容"
              v-model="inputData.comment"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row class="leave-message-footer" type="flex" justify="center">
          <el-col :span="9">
            <el-input
              v-model="inputData.eamil"
              placeholder="Email内容"
            ></el-input>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-button @click="getUserData">保存</el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
    <!-- 显示留言区 -->
    <el-row
      class="message-item"
      v-for="(item, index) in currentMessageList"
      :key="index"
    >
      <el-card class="box-card" shadow="hover">
        <el-row>
          <el-col :xs="7" :sm="4" :md="4">
            <div class="profile">
              <img src="../assets/profile.png" alt="" />
            </div>
          </el-col>
          <el-col :span="8" class="name-box">
            <p class="name-text">{{ item.name }}</p>
            <p><span v-text="getDateYear(item.date)"></span>在说:</p>
          </el-col>
        </el-row>

        <el-row class="comment-text">
          <el-col>{{ item.content }}</el-col>
        </el-row>

        <el-row class="leave-message-footer" type="flex" justify="center">
          <el-col :span="8">
            <span @click="agreeFn(item.id)" class="el-icon-success"
              >赞同({{ item.agree }})</span
            >
          </el-col>
          <el-col :span="8">
            <span @click="opposeFn(item.id)" class="el-icon-error"
              >反对({{ item.oppose }})</span
            >
          </el-col>
          <!-- <el-col :span="8" >
                            <span class="el-icon-chat-round">回复(0)</span>
                    </el-col> -->
        </el-row>
      </el-card>
    </el-row>

    <!-- 底部分页 -->
    <el-row v-if="messageSize > 5" class="footer" type="flex" justify="center">
      <el-pagination
        background
        page-size="5"
        :total="messageSize"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { defineComponent, computed, ref } from "vue";
import useGetMonth from "../hooks/userGetMonth";
import {
  saveMessage,
  getPageRep,
  getAddAgree,
  getAddOppose,
} from "../api/index";
export default defineComponent({
  name: "Message",
  setup() {
    // 用户输入内容
    const inputObj = {
      userName: "",
      comment: "",
      eamil: "",
    };
    const inputData = ref(inputObj);
    //拼接时间字符
    const getDateYear = computed(() => {
      return function (dataStr) {
        return useGetMonth(dataStr);
      };
    });

    // 当前分页码
    let pageSize = ref(1);

    //总的留言数量
    let messageSize = ref(0);

    //当前显示的
    let currentMessageList = ref([]);

    //获取留言数据
    getPageMessage(pageSize.value);
    async function getPageMessage(page) {
      let { code, message, data } = await getPageRep(page);
      if (code === 200 && message === "成功") {
        currentMessageList.value = data.result;
        messageSize.value = data.pageSize;
        window.scroll({
          top: 0,
          left: 0,
          behavior: 'smooth'
        });
        return;
      }
      ElMessage.error(message);
    }

    //保存用户留言的内容
    async function getUserData() {
      let { userName, comment, eamil } = inputData.value;
      if (!userName.trim() || !comment.trim() || !eamil.trim()) {
        ElMessage.error("内容不能为空!");
        return;
      }
      if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(eamil)) {
        ElMessage.error("请输入正确的邮箱格式!");
        return;
      }
      let { code, message } = await saveMessage(userName, comment, eamil);
      if (code === 200 && message === "成功") {
        ElMessage.success("保存成功,等待管理员审核");
        getPageMessage(1);
      } else {
        ElMessage.error("保存留言失败!");
      }
      inputData.value = {
        userName: "",
        comment: "",
        eamil: "",
      };
    }

    //分页获取留言内容
    function handleCurrentChange(currentPage) {
      getPageMessage(currentPage);
      pageSize.value = currentPage;
    }

    // 点赞接口
    async function agreeFn(id) {
      let { code, data, message } = await getAddAgree(id);
      console.log(code, data, message, "点赞接口");
      if (code === 200 && data === 1) {
        //   重新查询当前分页所有留言
        getPageMessage(pageSize.value);
        ElMessage.success(message);
        return;
      }
      ElMessage.error(message);
    }

    // 反对接口
    async function opposeFn(id) {
      let { code, data, message } = await getAddOppose(id);
      if (code === 200 && data === 1) {
        //   重新查询当前分页所有留言
        getPageMessage(pageSize.value);
        ElMessage.success(message);
        return;
      }
      ElMessage.error(message);
    }
    return {
      inputData,
      getUserData,
      currentMessageList,
      getDateYear,
      handleCurrentChange,
      messageSize,
      agreeFn,
      opposeFn,
    };
  },
});
</script>

<style lang='less' scoped>
#main {
  position: relative;
  display: flex;
  flex-flow: column;
  padding: 20px;
  width: 100%;
  transition: all 4s ease 0s;
  .top {
    margin: 20px 0px;
    text-align: center;
    color: rgb(150 148 148 / 90%);
    .top-title {
      margin: 10px 0px;
      font-weight: 900;
      font-size: 40px;
    }
    .top-num {
      font-size: 18px;
      font-weight: 600;
    }
  }

  .leave-message,
  .message-item {
    .box-card {
      width: 100%;

      .profile {
        width: 80px;
        height: 80px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .name-box {
        display: flex;
        flex-flow: column;
        justify-content: center;
        .el-input {
          border: none;
        }
        .name-text {
          font-size: 26px;
          color: rgba(0, 0, 0, 0.8);
        }
        p {
          font-size: 12px;
          color: #888;
        }
      }

      .comment-text {
        margin: 20px 0px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.6);
      }

      .leave-message-footer {
        text-align: center;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.4);
      }
    }
  }

  .message-item {
    margin: 30px 0px;
  }

  .footer {
    width: 100%;
    .el-pagination {
      margin-bottom: 40px;
    }
  }
}
#main /deep/ .el-card {
  width: 100%;
  border: none;
}
#main /deep/ .el-card__body {
  background: rgb(250, 251, 255);
}

#main /deep/ .el-input__inner {
  background: rgb(250, 251, 255);
}
#main /deep/ .el-textarea__inner {
  background: rgb(250, 251, 255);
}
#main /deep/ .el-button {
  background: rgb(250, 251, 255);
}
</style>